<!--
* @description 论坛详情-手机端
* @fileName bbs_detail.vue
* @author huangyu
* @date 2023/04/22 16:08:49
!-->
<template>
    <div style="padding-bottom:68px;" class="appContent">
        <van-nav-bar
        title="论坛详情"
        left-arrow
        @click-left="onClickLeft"
        >
        <template #right>
            <a href="javascript:;" @click="clickMyBbs" style="text-decoration:underline;font-size:12px;" v-if="isLookMy">只看自己</a>
            <a href="javascript:;" @click="clickMyBbsNo" style="text-decoration:underline;font-size:12px;" v-else>取消只看自己</a>
        </template>
        </van-nav-bar>
        <van-cell-group v-if="pageindex==1">
            <van-cell>
                <template #title>
                    <van-row>
                        <van-col :span="4">
                            <div class="userImage">
                                <el-image :src="model.image" fit="contain" style="width:42px;height:42px;border:50%;border:1px solid #ddd;border-radius:50%;">
                                    <div slot="error">
                                        <el-image fit="contain" src="/game/images/game/zhuxian/userImage.png"></el-image>
                                    </div>
                                </el-image>
                            </div>
                        </van-col>
                        <van-col :span="20">
                            <div>{{model.gameName}}</div>
                            <div class="time" style="color:#999;">{{model.create_time | formatDate}}</div>
                        </van-col>
                        
                    </van-row>
                    <h2>{{model.title}}</h2>
                </template>
                <template #right-icon>
                    <div style="font-size:12px;color:#999;">楼主</div>
                    
                </template>
                <template #label>
                    <div v-html="model.content" style="color:#333;font-size:14px;"></div>
                </template>
            </van-cell>
        </van-cell-group>

        <van-cell-group style="margin-top:10px;">
            <van-cell v-for="(item,index) in model.replyList" :key="index">
                <template #title>
                    <van-row>
                        <van-col :span="3">
                            <div class="userImage">
                                <el-image :src="item.image" fit="contain" style="width:28px;height:28px;border:50%;border:1px solid #ddd;border-radius:50%;">
                                    <div slot="error">
                                        <el-image fit="contain" src="/game/images/game/zhuxian/userImage.png"></el-image>
                                    </div>
                                </el-image>
                            </div>
                        </van-col>
                        <van-col :span="21">
                            <div style="margin-top:3px;color:#666;">{{item.gameName}}</div>
                        </van-col>
                    </van-row>
                </template>
                <template #right-icon>
                    <div style="font-size:12px;color:#999;">
                        <van-icon name="chat-o" size="14" @click="clickUserReply(item)" />
                        {{pageindex>1?(pageindex-1)*pagesize+index+1:index+1}}楼
                    </div>
                </template>
                <template #label>
                    <div v-html="item.content" style="color:#333;font-size:14px;"></div>
                    <div class="time" style="padding:5px 0;color:#999;font-size:12px;">{{item.create_time | formatDate}}</div>
                    <div class="messageContent" style="background:#f2f2f2;padding:8px;border-radius:5px;" v-if="item.messageList.length>0">
                        <div v-for="(message,index2) in item.messageList" :key="index2" class="messageList">
                            <span class="color_blue" @click="clickToUserReply(item,message)">{{message.gameName}}</span> <span v-if="message.toUserId">回复: </span> <span class="color_blue">{{message.toGameName}}</span>: {{message.content}}
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <van-pagination v-if="total>20" v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />

        <!-- 留言某一条 -->
        <van-popup v-model="dialogUserReply" position="bottom" :style="{ height: '20%' }">
            <div style="padding:8px;font-size:12px;color:#999;overflow-y:hidden">回复 {{row.gameName}} {{row.content}}</div>
            <van-form @submit="submitUserReply" label-width="4em">
                <van-field
                    v-model="userReplyForm.userContent"
                    rows="1"
                    :autosize="{minHeight:50}"
                    label=""
                    type="textarea"
                    placeholder="请输入内容"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">发表</van-button>
                </div>
            </van-form>
        </van-popup>

        <!-- 回复某个人 -->
        <van-popup v-model="dialogToUserReply" position="bottom" :style="{ height: '20%' }">
            <div style="padding:8px;font-size:12px;color:#999;overflow-y:hidden">回复 {{rowMessage.gameName}} {{rowMessage.content}}</div>
            <van-form @submit="submitUserReply" label-width="4em">
                <van-field
                    v-model="toUserContent"
                    rows="1"
                    :autosize="{minHeight:50}"
                    label=""
                    type="textarea"
                    placeholder="请输入内容"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">发表</van-button>
                </div>
            </van-form>
        </van-popup>

        <!-- 最底部回复 -->
        <div style="position:fixed;bottom:0;left:0;border-top:1px solid #ddd;width:100%;background:#fff;height:50px;z-index:1000;">
            <van-form @submit="submitBottomReply" label-width="4em" v-if="!model.isStop">
                <van-row>
                    <van-col span="18">
                        <van-field
                            v-model="replyContent"
                            rows="1"
                            label=""
                            placeholder="请输入内容"
                        />
                    </van-col>
                    <van-col span="6">
                        <van-button round block type="info" size="mini" style="margin:12px auto 0 auto;width:65px;" native-type="submit">回复</van-button>
                    </van-col>
                </van-row>
            </van-form>
            <div v-else>已停止回复消息</div>
        </div>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import { formatDate } from '@/common/unit.js'
import { Toast } from 'vant';
export default {
    components: {  },
    data() {
        return {
            token: this.$store.state.token,
            id: this.$route.query.id,
            userId: this.$store.state.user.userId,
            model: {
                title: ""
            },
            replyForm: {
                content: "",
            },
            
            pageindex: 1,
            pagesize: 20,
            total: 0,

            dialogUserReply: false,
            userReplyForm:{},
            row: {},
            
            dialogToUserReply: false,
            rowMessage: {},
            toUserContent: "",

            dialogReply: true,
            replyContent: "",
            isLookMy: true,
        }
    },
    mounted() {
        if(this.id){
            this.getData()
        }
    },
    methods: {
        clickMyBbsNo(){
            this.isLookMy = true
            this.getData()
        },
        clickMyBbs(){
            this.isLookMy = false
            this.getData(this.userId)
        },
        onClickLeft(){
            this.$router.go(-1);
        },
        getData(userId){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-detail2',
                data: {
                    _id: this.id,
                    userId: userId,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.model = res.data
                    this.total = res.total
                }
            })
        },
        changePage(value){
            this.pageIndex = value
            this.getData()
        },
        clickUserReply(item){
            this.row = {...item}
            this.dialogUserReply = true
        },
        // 留言
        submitUserReply(){
            if(this.token){
                let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-user-add',
                    token: this.token,
                    data: {
                        replyId: this.row._id,
                        content: this.userReplyForm.userContent,
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        Toast.success("留言成功")
                        this.getData()
                        this.dialogUserReply = false
                    }
                })
            }else{
                Toast.fail("请先登录！")
            }
        },
        clickToUserReply(item,message){
            if(this.token!=item.userId){
                this.row = {...item}
                this.rowMessage = {...message}
                this.dialogToUserReply = true
            }else{
                Toast.fail("不能回复自己")
            }
        },
        // 回复某个人
        submitToUserMessage(){
            if(this.token){
                let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-user-add',
                    token: this.token,
                    data: {
                        replyId: this.row._id,
                        cBbsId: this.id,
                        toUserId: this.rowMessage.userId,
                        content: this.toUserContent,
                    },
                }
                // console.log(params)
                get('game', params).then(res => {
                    if (res) {
                        Toast.success("回复成功")
                        this.getData()
                        this.dialogToUserReply = false
                    }
                })
            }else{
                Toast.fail("请先登录！")
            }
        },
        // 最底部回复
        submitBottomReply(){
            if(this.token&&this.id){
                  let params = {
                    type: 'getBbs',
                    api: 'api-bbs-reply-add',
                    token: this.token,
                    data: {
                        _id: this.id,
                        content: this.replyContent
                    },
                }
                get('game', params).then(res => {
                    if (res) {
                        Toast.success("回复成功")
                        this.getData()
                        this.replyContent = ""
                        // console.log(res)
                    }
                })  
            }else{
                Toast.fail("请先登录!")
            }
        },
        
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd hh:mm:ss");
            return res;
        },
    }
}
</script>

<style scoped>
</style>